<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>晒宝详情页</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }

        .red-box {
            z-index: 9;
            width: 2.7rem;
            height: 1.89rem;
            background: #fff;
            border-radius: 6px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 6px;
        }

        .red-box h2 {
            font-size: .16rem;
            color: rgba(18, 18, 18, 0.9);
            text-align: center;
            margin-top: .12rem;
            margin-bottom: .16rem;
        }

        .red-box ul {
            width: 2.09rem;
            display: block;
            margin: 0 auto;
            border-radius: 6px;
        }

        .red-box ul li {
            float: left;
            width: .68rem;
            line-height: .36rem;
            border: 1px solid rgba(18, 18, 18, 0.25);
            text-align: center;
            border-right: none;
            border-bottom: none;
        }

        .red-box ul li:nth-child(3n) {
            border-right: 1px solid rgba(18, 18, 18, 0.25);
        }

        .red-box ul li:nth-child(4),
        .red-box ul li:nth-child(5),
        .red-box ul li:nth-child(6) {
            border-bottom: 1px solid rgba(18, 18, 18, 0.25);
        }

        .red-box ul li img {
            width: .1rem;
            height: .12rem;
            margin-right: .03rem;
        }

        .red-box .button-wechart {
            border-radius: 6px;
            display: block;
            border: 1px solid rgba(0, 183, 0, 1);
            text-align: center;
            line-height: .3rem;
            width: .81rem;
            background: url('../img/微信支付 (1)@2x.png') no-repeat .12rem;
            background-size: .11rem .1rem;
            color: rgba(0, 183, 0, 1);
            font-size: .1rem;
            /*box-sizing: border-box;*/
            padding-left: .1rem;
            margin: 0.16rem auto 0;
        }

        .x {
            font-size: .1rem;
            color: rgba(18, 18, 18, 0.25);
            position: absolute;
            top: .11rem;
            right: .15rem;
        }
        .section{
            background: #fff;
            border-bottom: solid 1px #ddd;
        }
        .ins{
            width: 85%;
            float: left;
            border: none;
            line-height: .4rem;
            padding: 0 .2rem;
            box-sizing: border-box;
        }
        .imgs-div{
            float: right;
            width: 15%;
            text-align: center;
            line-height: .4rem;
        }
		.look_author{
			width:0.6rem!important;
		}
		.moneybox{
			position:fixed;
			left:0;
			top:0;
			width:100%;
			height:100%;
			background:rgba(0,0,0,0.2);
			z-index:222222;
		}
		.shaib_img{
			height:2.5rem!important
		}
		.addclass1{
			background:url('../img/点赞 01@2x.png') no-repat left center;
			background-size:0.12rem;
		}
		.addclass2{
			background:url('../img/zanno.png') no-repat left center!important;
			background-size:0.12rem;
		}
		.dianz{
			width:.12rem;
			height:.12rem;
		}
		.dashang_num,.dashang_money{
			color:red!important;
		}
    </style>
</head>

<body>
    <!--头部-->
    <!-- <div class="public-header flex">
        <span class="public-header-left-back"></span>
        <span class="public-header-center">晒宝详情页</span>
        <span class="public-header-right"></span>
    </div> -->

    <!--正文-->
    <div class="Sunbird-details-page bc-gray" style="min-height:667px;">
        <!--<h1 id="biaoti">标题标题</h1>-->
        <p class="t1">
            <!--<span>2017.07.02</span>-->
            <em id="username">李某某</em>
        </p>
        <ul class="imgsdisplay">
            <li style='display:none'>
                <img class="shaib_img" src="" alt="">
                <p class="des" id="miaoshu"></p>
            </li>
        </ul>
         <div class="box dashang">
            <img src="../img/红包@2x.png" alt="">
            <p class="t2"></p>
        </div>
        <p class="t3 dashang_num"></p> 
        <p class="t3 dashang_money"></p> 
        <p class="t4">
            阅读 <span id="readingQuantity"></span>
            <img class="dianz" src="" alt="" />
            <span class="add_good"></span>
            <i><a id="tsha">投诉</a></i>
        </p>
        <span class="button" style="margin-bottom: 64px;" onclick='javascript:window.location.href="../page/publishment.html"'>我也来晒宝</span>
         <div class="section" style="">
            <p class="t5">
                <span>评论<span id="comlen"></span></span>
                <!--<em class="look_author">只看作者</em>-->
            </p>
             <div id="common_main" style="margin-bottom: 50px;">

             </div>



        </div>
        <div class="search" style="position: fixed;left: 0;right: 0;bottom: 0;z-index: 11111;">
                <input type="text" placeholder="我来说一说" id="comment" style="width: 80%;" class="ins">

               <div class="imgs-div">
                   <img src="../img/fasio.png" alt="" style="width: 18px;"id="postComment">
               </div>
        </div>
    </div>
	<div class="moneybox" style="display:none;">
	    <div class="red-box">
	        <h2>打赏金额</h2>
	        <ul class='clearfix dashang'>
	            <li><img src="../img/红包@2x.png" alt="">0.1</li>
	            <li><img src="../img/红包@2x.png" alt="">1</li>
	            <li><img src="../img/红包@2x.png" alt="">2</li>
	            <li><img src="../img/红包@2x.png" alt="">5</li>
	            <li><img src="../img/红包@2x.png" alt="">10</li>
	            <li><img src="../img/红包@2x.png" alt="">20</li>
	        </ul>
	        <span class="button-wechart">微信支付</span>
	        <span class="x"><img src="../img/payclose.png" alt="" style="width:0.15rem;height:0.15rem;"/></span>
	    </div> 		
	</div>


    <!--灰色浮层-->
    <div class="mask" style="background: rgba(50,50,50,0.5);display:none;z-index:2;top:0.44rem;"></div>




    <script>
        var sharBioid = getQueryString('sharBioid');
		var give_user = '';//被打赏人的userid
		var shaiId = '';//晒的宝贝的id
		var returnVal = {
			shareTitle:'',//分享的title
			shareLink:'',//分享的链接
			shareImgurl:'',//分享的图片
		};//分享需要发送的数据
        $(function () {
           $("#postComment").click(function (){
               //提交评论
               //post评论
               if(isNull($("#comment").val())){
                   alert("请填写评论内容");
                   return false;
               }
               $.ajax({
                   url:base_url+"ZITAOHUI/shareBioAssessList",
                   type:"post",
                   data:{
                       shareBioId:sharBioid,
                       userId:sessionStorage.getItem("uid"),
                       content:$("#comment").val()
                   },
                   dataType:"json",
                   success:function (data){
                       if(data.code == 1){
                           alert("评论成功");
                           window.location.href = window.location.href;
                       }
                   },
                   error:function (error){

                   }
               })
           })
            $("#tsha").click(function (){//投诉按钮跳转页面
                 window.location.href = "Complaints-type.html?produceId="+sharBioid+"&uid="+sessionStorage.getItem("uid")+"&reason="+encodeURI(encodeURI('晒宝投诉'))+"&storeid=''"+"&comflag=2";
            });
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            });
            sendAjax()
            function sendAjax(){
	            $.ajax({
	                url: base_url + 'ZITAOHUI/sharebioMsg',
	                data: {
	                    sharBioid: sharBioid,
	                    userId:sessionStorage.getItem("uid")
	                },
	                success: function (data) {
	                    console.log(data);
	                    returnVal.shareTitle = data.extend.list.discribe;
	                    returnVal.shareLink = window.location.href;
	                    returnVal.shareImgurl = data.extend.list.userUpImage.split(',')[0];
	                    let all_data = data.extend.list;
	                    // 转化时间戳
	                    let time = new Date(all_data.add_time);
	                    $('h1').html(all_data.discribe)
	                    $('#username').html(all_data.userNikeName);
	                    for(var i=0;i<all_data.userUpImage.split(',').length;i++){
	                    		var clone = $('.imgsdisplay li').eq(0).clone(true);
	                    		clone.find('img').attr('src', all_data.userUpImage.split(',')[i]);
	                    		clone.appendTo($('.imgsdisplay')).show()
	                    };
	                    $('.imgsdisplay li').eq(all_data.userUpImage.split(',').length).find('#miaoshu').html(all_data.content)
	                    $("#readingQuantity").text(all_data.readingQuantity);//阅读数
	                    $('.add_good').text(all_data.goodNum);//点赞数量
	                    $('.dashang_num').text('已有'+all_data.people_num+'人打赏');//打赏人数
	                    $('.dashang_money').text('共打赏'+(all_data.sum_total_fee/100).toFixed(2)+'元');//打赏金额
	                    if(all_data.is_like==1){//判断是否点赞
	 						$('.dianz').attr('src','../img/点赞 01@2x.png')
	                    }else if(all_data.is_like==0){
	                    		$('.dianz').attr('src','../img/zanno.png')
	                    };
	                    give_user = all_data.userId;//被打赏人的userid
	                    shaiId = all_data.id;//晒宝的id
	                },
	                error: function () {
	
	                }
	            });            	
            };
            $.ajax({
                url: base_url + 'ZITAOHUI/ShareBioQuantity',
                data: {
                    sharebioId: sharBioid
                },
                success: function (data) {
                    console.log(data);
                },
                error: function () {

                }
            });
            $('.add_good').click(function () {
                $.ajax({
                    url:base_url+'ZITAOHUI/increaseShareBioGoodsNum',
                    data:{
                        sharBioid:sharBioid,
                        user_id:sessionStorage.getItem("uid")
                    },
                    success:function(data){
                        if(data.extend.list.msg == '点赞成功'){
                           // $(".add_good").html($(this).html()+1);
                             alert(data.extend.list.msg);
                            window.location.reload()
                        }else{
                            alert(data.extend.list.msg)
                        }

                    }
                })
            });
            getComment();
            function getComment (){
                //获取评论列表
                $.ajax({
                    url:base_url+"ZITAOHUI/shareBioAssessListExhibition",
                    type:"post",
                    data:{
                        shareBioId:sharBioid
                    },
                    dataType:"json",
                    success:function (data){
                        console.log(data);
                        var _d = data.extend.data;
                        $("#comlen").text(_d.length);
                        $.each(_d,function (k,v){
                            $("#common_main").append('     <div>' +
                                '                     <div class="img clearfix">' +
                                '                         <img style="border-radius: 100px;" src="'+v.user_image+'" alt="">' +
                                '                         <p class="t6">'+v.user_nike_Name+'</p>' +
                                '                         <p class="t7">'+returnTime(v.add_date)+'</p>' +
                                '                     </div>' +
                                '                     <div class="t8">'+v.content+'</div>' +
                                '                 </div>')
                        })
                    },
                    error:function (error){

                    }
                })
            }
        });
        function returnTime(res){

            var now = new Date(res);
            var year=now.getFullYear();
            var month=now.getMonth()+1;
            var date=now.getDate();
            var hour=now.getHours();
            var minute=now.getMinutes();
            var second=now.getSeconds();
            return year+"-"+month+"-"+date+" "+hour+":"+minute;

        };
        //晒宝中的大赏；
        $('.dashang').click(function(){
        		$('.moneybox').css({'display':'block'});
        		$('body').css('overflow','hidden');//禁止滚动
        });
        $('.x').click(function(){
        		$('.moneybox').css('display','none');
        		$('body').css('overflow','visible');
        });
        //打赏功能
        var priceJg = 0;//打赏价格
	    var appId = "";
	    var prepayId = "";
	    var timeStamp = "";
	    var nonceStr = "";
	    var paySign = "";
	    var signType = "";
        $('.dashang li').click(function(){
        		wxPay($(this).text());
        		console.log(sessionStorage.getItem("uid"),give_user,suijiNum)
        });
        //var suijiNum = ("0000000" + 1000000 * Math.random()).match(/(\d{7})(\.|$)/)[1];//生成位随机数
	    function wxPay(price){ //微信支付
	        $.ajax({
	            url:base_url+"ZITAOHUI/wexinpay",
	            type:"post",
	            data:{
	                total_fee:price*100,
	                userId:sessionStorage.getItem("uid"),
	                give_userId:give_user,
	                id:shaiId,
	                value:8
	            },
	            dataType:"json",
	            success:function (data){
	                if(data.code == 1){
	                    console.log(data);
	                    var d = data.extend.data;
	                    appId = d.appId;
	                    prepayId = d.package;
	                    timeStamp = d.timeStamp;
	                    nonceStr = d.nonceStr;
	                    paySign = d.paySign;
	                    signType = d.signType;
	                    onBridgeReady();
	                }else{
	                    alert("请求失败，暂无法支付");
	                }
	            },
	            error:function (data){
	              alert("地址失效");
	            }
	
	        })
	    };
	    function onBridgeReady(){
	        WeixinJSBridge.invoke(
	            'getBrandWCPayRequest', {
	                "appId" : appId,     //公众号名称，由商户传入
	                "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数
	                "nonceStr" : nonceStr, //随机串
	                "package" : prepayId,
	                "signType" : signType,         //微信签名方式：
	                "paySign" : paySign //微信签名
	            },
	            function(res){
					console.log(res);
	                if(res.err_msg == "get_brand_wcpay_request:ok" ) {
	                		alert('支付成功');
	                    window.location.reload();//刷新当前页面
	                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
	                }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
	                		alert('支付失败');
	                    //window.location.href = "../index.html";
	                }else if(res.err_msg == "get_brand_wcpay_request:fail"){
	                		alert('支付失败');
	                    //window.location.href = "../index.html";
	                }
	            }
	        )
	    };
    </script>
</body>

</html>